<template>
  <div id="circle"></div>
</template>

<script setup>
import * as echarts from "echarts"
let $docLayer = null
let features = null
let Array1 = ref([])
let Array2 = ref([])
let Array3 = ref([])
let Array4 = ref([])
let Array5 = ref([])
let Array6 = ref([])
import { Query } from "../../../../utils/Query";
let service = {

  name: "guanggu",
  layerId: 2,
};
const success = (data) => {
  let format = new Zondy.Format.PolygonJSON();
  features = format.read(data);
  classified()
};
Query.queryByLayer({
  service,
  success,
});
function classified() {
  if (!features) {
    console.log("Features is null");
    return;
  }
  features.forEach((item) => {
    let type = item.values_.values_["事件类型"];
    if (type == "失火") {
      Array1.value.push(type);
    } else if (type == "刮擦") {
      Array2.value.push(type);
    } else if (type == "其他") {
      Array3.value.push(type);
    } else if (type == "碰撞") {
      Array4.value.push(type);
    } else if (type == "碾压") {
      Array5.value.push(type);
    } else if (type == "翻车") {
      Array6.value.push(type);
    }
  })
}
onMounted(()=>{
  $docLayer = inject("$docLayer")
  setTimeout(()=>{
    const a = Array1.value.length;
    const b = Array2.value.length;
    const c = Array3.value.length;
    const d = Array4.value.length;
    const e = Array5.value.length;
    const f = Array6.value.length;
    let circleChart = echarts.init(document.getElementById("circle"));
    circleChart.setOption( {
  title: {
    text: '事故类型占比',
    left: 'center',
    top:"20px",
    textStyle:{
      color:"white"
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  toolbox: {
    show: false,
    feature: {
      mark: { show: true },
      dataView: { show: false, readOnly: false },
      restore: { show: false },
      saveAsImage: { show: false }
    }
  },
  series: [
    {
      name: '事故类型占比',
      type: 'pie',
      radius: [20, 140],
      center: ['50%', '50%'],//圆心的位置
      roseType: 'area',//以什么来表示百分比，圆的半径或圆的面积
      itemStyle: {
        borderRadius: 7//每个item的圆润程度
      },
      label: {
        show: true,
      },
      labelLine:{
        length:3,
        fontSize: 20
      },
      emphasis: {
        label: {
          show: false,
        }
      },
      data: [
        { value: d, name: '碰撞',},
        { value: b, name: '刮擦' },
         { value: f, name: '翻车' },
        { value: a, name: '失火' },
       { value: e, name: '碾压' },
        { value: c, name: '其他' },
      ]
    },
  ]
})
  },100)

})
</script>

<style scoped>
  #circle{
    position: absolute;
    left: 3%;
    top: 180px;
    height: 400px;
    width: 400px;
    background-color: rgba(0, 60, 136, 0.7);
    border-radius: 30px;
  }
</style>